<template>
  <div class="home">
    <Card class="content_body" v-for="time in OrderArray" :key="time">
      <p slot="title">
        <span class="OrderNum num">订单号:</span>
        <span class="OrderNumber num">{{time.number}}</span>
      </p>
      <div :class="context.content"  >
        <ul :class="context.ul">
          <li :class="context.img">
            <img :src="time.image"  alt="">
            <!--<img :src="img_class(time.goods.id)" alt="">-->
          </li>
          <li :class="context.info">
            <div :class="context.goodsname">
              {{time.name}}
            </div>
            <div :class="context.pricea">
              {{time.price}}件
            </div>

          </li>
        </ul>
      </div>

      <!--<p>Content of card</p>-->
      <!--<p>Content of card</p>-->
      <!--<p>Content of card</p>-->
    </Card>
  </div>
</template>
<script>
  export default {
    props: {
      OrderArray: {
        type: Array,
        default() {
          return []
        }
      }
    },
    components: {},
    data() {
      return {
        context:{
          content: 'content',
          ul: 'con_ul',
          img:'con_img',
          info:'con_info',
          goodsname:'con_goodsname',
          pricea:'con_price',
          goostext:'con_goodstext textdisplay'
        },
      }
    },
    methods: {},
    watch: {},
    computed: {
      //计算属性
    },
    created() {

    },
    mounted() {
      console.log(this.OrderArray);
      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
    background:#f7f7f7;
  }

  .content_body {
   margin-bottom: 10px;
  }
  .num{

    font-size: 14px;
  }
  .OrderNum{
    color: #9ea7b4;
  }
  .OrderNumber{
    color: #657180;
  }
  /***************************上下****************************************/
  .content {
    width: 100%;
    height: 89px;
    background-color: #fff;
  }

  .con_ul {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .con_ul li {
    float: left;
  }
  .con_img{
    width: 25%;
    height: 90%;
    overflow: hidden;
  }
  .con_img img{
    width:100%;
    height:100%;
  }
  .con_info{
    width: 65%;
    height: 100%;
    margin-left: 2%;

  }
  .con_goodsname{
    width:100%;
    height:51px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 13px;
    color: #657180;
    line-height: 18px;

  }
  .con_price{
    width: 100%;
    height: 21px;
    margin-top: 9px;
    font-size: 13px;
    color: #9ea7b4;
  }
  .con_goodstext{
    width:100%;
    height:21px;
    margin-top: 8px;
    color: #9ea7b4;
    text-indent: 8px;
  }


</style>
